<!-- 登录页面 -->
<template>
	<view>
		<view class="loginLogo">
			<form @submit="onSubmit(true, $event)" class="loginContent">
				<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
					<image class="avatar"
						:src="formData.avatarUrl?formData.avatarUrl:'https://qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'">
					</image>
					<text class="loginLogoText" v-if="isShow">授权头像</text>
				</button>
				<view class="nameContent">
					<view class="title">昵称</view>
					<input name="nickName" type="nickname" placeholder="请填写昵称" class="weui-input"
						v-model="formData.nickName" />
				</view>

				<view class="loginBtn">
					<!-- @getphonenumber="getPhoneNumber" form-type="submit" open-type="getPhoneNumber" -->
					<button class="btn" @click="uniLogin">uniLogin</button>
					<button class="btn" @click="getUserProfile">getUserProfile</button>
				</view>
			</form>
		</view>

	</view>
</template>

<script>
	import {
		getOpenId,
		getPhoneNumber,
		getUserInfo
	} from '@/api/index.js'
	export default {
		data() {
			return {
				sessionKey:'',
				userCode: '',
				iv: "",
				encryptedData: '',
				phoneNum: "",
				openId: '',
				formData: {
					nickName: '',
					avatarUrl: ''
				},
				isShow: true,
				token: ""
			}
		},
		watch: {
			formData: {
				handler(newVal, oldValue) {
					if (newVal.avatarUrl) {
						this.isShow = false; //监测isShow，如果授权头像了就隐藏 授权头像 字样
					}
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			//获取微信头像
			onChooseAvatar(e) {
				this.formData.avatarUrl = e.detail.avatarUrl;
				console.log("eeee", e.detail);
			},
			onSubmit(confirm, event) {
				if (confirm) {
					try {
						let {
							nickName
						} = event.detail.value;
						this.formData.nickName = nickName;
					} catch (e) {
						//TODO handle the exception
						uni.showToast({
							icon: 'none',
							title: e.message
						});
						return;
					}
				}
			},
			// 微信获取手机号信息
			// getPhoneNumber(data) {
			// 	if (this.formData.avatarUrl && this.formData.nickName) {
			// 		//微信小程序返回的相关数据
			// 		this.iv = data.detail.iv;
			// 		this.encryptedData = data.detail.encryptedData;
			// 		uni.showToast({
			// 			title: '登录中',
			// 			icon: 'loading',
			// 			duration: 1000,
			// 		});
			// 		//处理头像链接
			// 		this.uploadImage(this.formData.avatarUrl);

			// 	} else {
			// 		uni.showToast({
			// 			title: `请选择头像或输入昵称~`,
			// 			icon: 'none'
			// 		});
			// 	}
			// },
			uniLogin() {
				uni.login({
					provider: 'univerify',
					success: async res => {
						try {
							const {data} = await getOpenId({
								code: res.code
							})
							this.openId = data.data.openId
							console.log(data.data.data.session_key)
							this.sessionKey = data.data.data.session_key
							this.userCode = res.code
						} catch (err) {
							console.log(err)
						}
					}
				});
			},
			getUserProfile() {
				uni.getUserProfile({
					desc: '获取用户信息',
					success: async res => {
						try {
							const res1 = await getUserInfo({
								sessionKey: this.sessionKey,
								iv: res.iv,
								encryptedData: res.encryptedData
							})
							console.log(res1)
						} catch (err) {
							console.log(err)
						}
					}
				})
			},
			//获取该登录用户的信息
			// async getUserInfo(id) {
			// 	let result2 = await nineSelect({
			// 		id: id
			// 	});
			// 	let tempArr = result2.data;

			// 	//以下是用户等级字段的处理
			// 	if (tempArr.status == 1) { //注册用户
			// 		tempArr.levelImg =
			// 			'https://cn-chengdu.aliyuncs.com/hls/wode/zhuce.png';
			// 		tempArr.levelName = '注册会员';
			// 	} else if (tempArr.status ==
			// 		2) { //银牌会员
			// 		tempArr.levelImg =
			// 			'https://cn-chengdu.aliyuncs.com/hls/wode/chuji.png';
			// 		tempArr.levelName = '银牌会员';
			// 	} else if (tempArr.status ==
			// 		3) { //金牌会员
			// 		tempArr.levelImg =
			// 			'https://cn-chengdu.aliyuncs.com/hls/wode/gaoji.png';
			// 		tempArr.levelName = '金牌会员';
			// 	}
			// 	tempArr.points = '0'; //积分功能暂未使用，为所有账号初始化为0

			// 	//将用户信息存储进仓库
			// 	this.updateUserAllInfoData(tempArr);
			// 	console.log("登录 用户信息--", this.userInfo);

			// 	uni.showToast({
			// 		title: `登陆成功~`,
			// 		icon: 'none'
			// 	});

			// 	//跳转回个人中心页面
			// 	setTimeout(() => {
			// 		uni.switchTab({
			// 			url: `/pages/wode/wode`,
			// 			success() {
			// 				var page = getCurrentPages().pop();
			// 				if (page == undefined || page == null) return;
			// 				page.onLoad();
			// 			},
			// 			fail(e) {
			// 				console.error(e);
			// 			}
			// 		})
			// 	}, 2000);
			// },
			//头像图片持久化
			uploadImage(url1) {
				//uni.uploadFile将微信返回的临时地址转成文件流传输给后端，从而上传服务器，拿到永久地址
				uni.uploadFile({
					url: `https://qmhly.hls.com/nine/getImgUrl`,
					filePath: url1,
					name: 'file',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					formData: {
						'user': this.formData.nickName
					},
					success: (uploadFileRes) => {
						this.formData.avatarUrl = JSON.parse(uploadFileRes.data).data;

						//进入登录流程
						this.uniLogin();
					}
				});
			},
		}
	}
</script>

<style scoped lang="scss">
	.avatar-wrapper {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: none;
		color: inherit;
		border: none;
		padding: 0;
		font: inherit;
		cursor: pointer;
		outline: inherit;

		.avatar {
			height: 120rpx;
			width: 120rpx;
			border-radius: 20rpx;
		}
	}

	.avatar-wrapper::after {
		border: none;
	}

	.nameContent {
		display: flex;
		margin: 70rpx 0;
		border-top: 1px solid #eee;
		border-bottom: 2rpx solid #eee;
		padding: 20rpx 40rpx;
		width: 100vw;
		box-sizing: border-box;
		font-size: 28rpx;
		align-items: center;

		.title {
			margin-right: 40rpx;
		}
	}

	.loginLogo {
		height: 700rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.loginContent {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			width: 100%;

			.loginLogoText {
				font-size: 24rpx;
				color: #828282;
				margin-top: 20rpx;
			}
		}
	}

	.loginBtn {
		width: 100%;

		.btn {
			width: 80%;
			border-radius: 20rpx;
			background-color: #ee3236;
			color: white;
		}
	}
</style>